<template>
  <div class="navHeader">
    <van-nav-bar >
      <template #left>
        <!-- <span class="iconfont icon-gerenzhongxin"></span> -->
        <van-icon name="user-circle-o"/>
      </template>
      <template #title>
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
        />
      </template>
      <template #right>
        <van-icon name="envelop-o" :badge="badge" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      badge: '',
      value: "",
    };
  },
};
</script>
<style scoped lang="less">
.navHeader {
  .iconfont {
    font-size: 25px;
    color: #1989fa;
  }
  ::v-deep .van-nav-bar__title{
      max-width: 100%;
  }
  .van-search{
      width: 280px;
  }
}
.van-icon van-icon-user-circle-o,van-icon-envelop-o{
  font-size: 0.6rem;
}
</style>